<template>
	<view class="page">
		<uni-nav-bar fixed="true" @clickLeft="cancel" backgroundColor="#6869a8" color="white" height="120rpx"
			statusBar="true">
			<view style="font-size: 37rpx; margin: auto;">
				<text>个人资料</text>
			</view>
			<view slot="left">
				<uni-icons type="back" size="30" color="white"></uni-icons>
			</view>
		</uni-nav-bar>
		<view style="text-align: center;">
			<image :src="user.avatar" mode="aspectFill"
				style="width: 200rpx;height: 200rpx;margin-top: 50rpx;border-radius: 20rpx;" @click="changeAvatar">
			</image>
			<view style="color: #3A3A3A;font-size: 30rpx;padding-bottom: 30rpx;">点击头像修改</view>
		</view>
		<view class="">
			<uni-list>
				<uni-list-item clickable @click="edit(1)">
					<template v-slot:header>
						<view style="font-size: 34rpx;"><text>昵称 : </text><text
								style="margin-left: 60rpx;font-size: 30rpx;color: #858786;">{{user.username}}</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view style="font-size: 34rpx;"><text>性别 : </text>
							<view style="margin-left: 60rpx;font-size: 30rpx;color: #858786;display: inline-block;">
								<!-- 								<text v-if="user.sex === null">未设置</text>
								<text v-if="user.sex === 0">男</text>
								<text v-if="user.sex === 1">女</text> -->
								<picker mode="selector" :range="sex" :value="user.sex" @change="change_sex"
									ref="sex_picker" style="display: inline-block;">
									<view>{{ sex[user.sex] }}</view>
								</picker>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view style="font-size: 34rpx;display: flex;align-items: center;"><text>年龄 : </text>
							<view
								style="margin-left: 60rpx;font-size: 30rpx;color: #858786;display: flex;align-items: center;">
								<uni-datetime-picker type="date" v-model="user.birth" :end="new Date().getTime()"
									style="display: inline-block;" @change="birth_change">
									<view>{{getAge(user.birth)}}</view>
								</uni-datetime-picker>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view style="font-size: 34rpx;display: flex;align-items: center;"><text>生日 : </text>
							<view
								style="margin-left: 60rpx;font-size: 30rpx;color: #858786;display: flex;align-items: center;">
								<uni-datetime-picker type="date" v-model="user.birth" :end="new Date().getTime()"
									style="display: inline-block;" @change="birth_change">
									<view>{{getBirth(user.birth)}}</view>
								</uni-datetime-picker>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<view style="font-size: 34rpx;"><text>位置 : </text>
							<view style="margin-left: 60rpx;color: #858786;display: inline-block;">
								<uni-data-picker :localdata="locationList" style="display: inline-block;"
									@change="change_location"><text
										style="font-size: 30rpx;">{{getLocation(user.location)}}</text>
								</uni-data-picker>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<uni-popup ref="popup_1" type="dialog">
			<uni-popup-dialog mode="input" :value="user.username" title="修改昵称" @confirm="change_name">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup_2" type="dialog">
			<uni-popup-dialog mode="base" type="info" title="确认修改" @confirm="save">
			</uni-popup-dialog>
		</uni-popup>
		<view class="footer">
			<button type="default" @click="confirm"
				style="width: 80%;color:white;background-color: #6869a8;margin-bottom: 30rpx;border-radius:35rpx;">保存</button>
			<button type="default" @click="cancel" style="width: 80%;border-radius:35rpx;">取消</button>
		</view>
	</view>
</template>

<script>
	import util from "@/config/util.js"
	export default {
		data() {
			return {
				user: {},
				sex: ["男", "女", "未填写"],
				locationList: util.provinces,
			};
		},
		mounted() {
			this.user = JSON.parse(JSON.stringify(this.$store.state.userInfo))
			if (this.user.sex !== null)
				this.sex_index = this.user.sex
			// console.log(util.provinces)
		},
		methods: {
			cancel() {
				uni.navigateBack({})
			},
			confirm() {
				// console.log('confirm')
				this.$refs.popup_2.open()
			},
			save() {
				this.user.birth = new Date(this.user.birth)
				console.log(this.user)
				this.$request.TokenRequest({
					url: "/user/updateUserInfo"
				}, this.user).then(res => {
					if (res.state === 200) {
						uni.showToast({
							title: "修改成功",
							icon: "success"
						})
						this.user.birth = new Date(this.user.birth).getTime()
						this.$store.commit("updateUserInfo", this.user)
					} else {
						uni.showToast({
							title: "网络错误",
							icon: "error"
						})
					}
				})
			},
			edit(index) {
				console.log(index)
				if (index === 1) this.$refs.popup_1.open()
			},
			birth_change(e) {
				console.log(e)
			},
			change_name(value) {
				if (value.length > 10) {
					uni.showToast({
						title: "昵称不能超过10个字符",
						icon: 'none'
					})
					return
				}
				this.user.username = value
			},
			change_sex(e) {
				this.user.sex = e.detail.value
				this.$refs.popup_2.close()
			},
			change_location(e) {
				// console.log(e)
				if (e.detail.value.length === 2)
					this.user.location = e.detail.value[0].text + " " + e.detail.value[1].text
				else if (e.detail.value.length === 1)
					this.user.location = e.detail.value[0].text
			},
			getAge(date) {
				let start = new Date(date)
				let now = new Date()
				let sYear = start.getFullYear()
				let nYear = now.getFullYear()
				let sMonth = start.getMonth()
				let nMonth = now.getMonth()
				let sDay = start.getDate()
				let nDay = now.getDate()
				if (nMonth < sMonth) return nYear - sYear - 1
				else if (nMonth > sMonth) return nYear - sYear
				else {
					if (nDay < sDay) return nYear - sYear - 1
					else return nYear - sYear
				}
			},
			getBirth(date) {
				let d = new Date(date)
				let month = d.getMonth() + 1
				let day = d.getDate()
				return month + " 月 " + day + " 日"
			},
			getLocation(location) {
				if (location === "") return "未设置"
				else return location
			},
			changeAvatar() {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success(res) {
						self.uploadImg(res.tempFilePaths[0])
					}
				})
			},
			//上传图片
			uploadImg(imgpath) {
				this.$util.uploadFile(imgpath).then(res => {
					// console.log(res)
					this.user.avatar = res
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: "图片上传失败!"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;
		// height: ;
	}

	.footer {
		// border-top: #858786 1px solid;
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		text-align: center;

		.width_30 {
			width: 30%;
		}

		.width_70 {
			width: 70%;
		}

		.button {
			font-size: 34rpx;
			margin: 18rpx 30rpx;
			padding: 20rpx 40rpx;
			display: inline-block;
			// sborder: #858786 1px solid;
			border-radius: 15rpx;
		}

		.cancel {
			color: #000;
			background-color: #e2e2e2;
		}

		.cancel_hover {
			background-color: #cccccc;
		}

		.confirm {
			border: none;
			color: #F5FFFF;
			background-color: #459FF8;
		}

		.confirm_hover {
			background-color: #3a87d0;
		}
	}
</style>
